<template>
  <div>
    <div class="home">
      <div class="home-content">
        <!-- swiper部分 -->
        <my-swiper :swiperImgs="swiperDatas.map(item => item.img)"></my-swiper>
        <!-- 活动展示部分 -->
        <activity>
          <div class="activity-banner">
            <!-- <img v-for="(item, index) in activitysData" :key="index" :src="item.img" /> -->
            <img src="http://imooc.res.lgdsunday.club/520-1.gif" />
            <img src="http://imooc.res.lgdsunday.club/520-2.gif" />
            <img src="http://imooc.res.lgdsunday.club/520-3.gif" />
          </div>
        </activity>
        <!-- 功能选项 -->
        <mode-icons></mode-icons>
        <!-- 秒杀模块 -->
        <seconds :dataSource="secondsData"></seconds>
        <!-- 拼购节 -->
        <activity>
          <div class="activity-pingou">
            <img src="@/assets/imgs/pinGouJie.gif" />
          </div>
        </activity>
      </div>
    </div>
    <home-bar></home-bar>
  </div>
</template>

<script>
import HomeBar from "@/components/tab-bar/tab-bar";
import MySwiper from "@/components/my-swiper/my-swiper";
import Activity from "@/components/index_common/Activity";
import ModeIcons from "@/components/index_common/Icons";
import Seconds from "@/components/index_common/Seconds";
export default {
  name: "HomePage",
  components: {
    HomeBar,
    MySwiper,
    Activity,
    ModeIcons,
    Seconds
  },
  data() {
    return {
      swiperData: [],
      secondsData: [
        {
          id: "1",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-1.jpg",
          price: "119",
          oldPrice: "169"
        },
        {
          id: "2",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-2.jpg",
          price: "1191",
          oldPrice: "1900"
        },
        {
          id: "3",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-3.jpg",
          price: "199",
          oldPrice: "289"
        },
        {
          id: "4",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-4.jpg",
          price: "79",
          oldPrice: "108"
        },
        {
          id: "5",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-5.jpg",
          price: "588",
          oldPrice: "1950"
        },
        {
          id: "6",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-6.jpg",
          price: "99.9",
          oldPrice: "316"
        },
        {
          id: "7",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-7.jpg",
          price: "239",
          oldPrice: "278"
        },
        {
          id: "8",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-8.jpg",
          price: "1499",
          oldPrice: "2199"
        },
        {
          id: "9",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-9.jpg",
          price: "2069",
          oldPrice: "4299"
        },
        {
          id: "10",
          icon: "http://imooc.res.lgdsunday.club/jingDongMiaoSha-10.jpg",
          price: "138.5",
          oldPrice: "245"
        }
      ],
      swiperDatas: [
        {
          img:
            "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/85536/33/4353/86165/5de5ffcbEd49bff16/4f19877c03fb2a61.jpg!cr_1125x445_0_171!q70.jpg.dpg"
        },
        {
          img:
            "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/58327/37/14957/141173/5dc11be0E439e7fe7/7d9de4c8b52c359b.jpg!cr_1125x445_0_171!q70.jpg.dpg"
        },
        {
          img:
            "//m.360buyimg.com/mobilecms/s700x280_jfs/t1/52605/34/16435/123239/5dd79b26Ebef35a70/f051d02148a990bc.jpg!cr_1125x445_0_171!q70.jpg.dpg"
        },
        {
          img:
            "//imgcps.jd.com/ling4/4477655/5rSB6Z2i5YWo5Z-O54Ot5Yqo/54iG5qy-6ZKc5oOg/p-5c13869682acdd181deefeeb/171a3eb5/cr_1125x445_0_171/s1125x690/q70.jpg"
        }
      ],
      activitysData: []
    };
  },
  created() {
      // this.initData();
  },
  methods: {
    //获取数据
    initData() {
      //this.$http
      this.$http
        .get("/static/mock/swiper.json")
        .then(res => {
          console.log(res);
          this.swiperData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
      //活动数据
      //   this.$http
      //     .get("/activitys")
      //     .then(res => {
      //       console.log(res.data);
      //       this.activitysData = res.data;
      //     })
      //     .catch(err => {});
    }
  }
};
//~自动在webpack下找alias找配置的别名
</script>

<style lang="scss" scoped>
@import "~@/assets/css/style.scss";
@import "~@/assets/css/colors.scss";
.home {
  width: 100%;
  height: 100%;
  background-color: $bgColor;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: px2rem(50);
  &-content {
    height: 100%;
    .activity-banner {
      margin-top: px2rem(-10);
      border-top-left-radius: px2rem(8);
      border-top-right-radius: px2rem(8);
      img {
        display: inline-block;
        width: 33.33%;
      }
    }
    .activity-pingou {
      background-color: #ffffff;
      margin-top: $marginSize;
      img {
        width: 100%;
      }
    }
  }
}
</style>
